
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>个人信息</title>
    <link href="/myhouse/static/web/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/myhouse/static/web/js/jquery.min.js"></script>
<%--    <script src="/myhouse/static/web/js/jquery-3.2.1.min.js"></script>--%>
    <!-- Custom Theme files -->
    <!--menu-->
    <script src="/myhouse/static/web/js/scripts.js"></script>
    <link href="/myhouse/static/web/css/styles.css" rel="stylesheet">
    <!--//menu-->
    <!--theme-style-->
    <link href="/myhouse/static/web/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Real Home Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
</head>
<body>
<script src="/myhouse/static/web/js/easyResponsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#horizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true   // 100% fit in a container
        });
    });
</script>
<!--header-->
<jsp:include page="/inc/head.jsp"></jsp:include>
<!--//-->
<div class=" banner-buying">
    <div class=" container">
        <h3><span>MY</span>house</h3>
        <!---->
        <jsp:include page="/inc/menu.jsp"></jsp:include>
        <div class="clearfix"> </div>
        <!--initiate accordion-->
        <script type="text/javascript">
            $(function() {
                var menu_ul = $('.menu > li > ul'),
                    menu_a  = $('.menu > li > a');
                menu_ul.hide();
                menu_a.click(function(e) {
                    e.preventDefault();
                    if(!$(this).hasClass('active')) {
                        menu_a.removeClass('active');
                        menu_ul.filter(':visible').slideUp('normal');
                        $(this).addClass('active').next().stop(true,true).slideDown('normal');
                    } else {
                        $(this).removeClass('active');
                        $(this).next().stop(true,true).slideUp('normal');
                    }
                });

            });
        </script>

    </div>
</div>


<div class="login-right">
    <div class="container">
        <h3>个人信息</h3>
        <div class="login-top">
            <div class="form-info">
                <form method="post" action="/myhouse/web/amend" enctype="multipart/form-data" >
                    <input type="hidden" value="${requestScope.InfoUser.id}" name="id">
                    <input type="hidden" value="${requestScope.InfoUser.userPass}" name="userPass">

                    <input type="hidden" value="${requestScope.InfoUser.userHead}" name="userHead">
                    <img style="width: 200px" src="/myhouse/static/web/images/${requestScope.InfoUser.userHead}" name="face" class="imgs">


                    <input type="file" name="face" id="img"><br>

                    <c:if test="${not empty requestScope.InfoUser.userName}">
                    用户名：<input type="text" value="${requestScope.InfoUser.userName}" name="userName">
                    </c:if>

                    <c:if test="${ empty requestScope.InfoUser.userName}">
                        用户名：<input type="text"  placeholder="请登录"  name="userName">
                    </c:if>
                    <span id="name"></span><br>

<%--                    密码：<input type="text" value="${requestScope.InfoUser.userPass}" name="userPass">--%>
<%--                    <span id="pass"></span><br>--%>


                    <c:if test="${not empty requestScope.InfoUser.userPhone}">
                    手机号：<input type="text" value="${requestScope.InfoUser.userPhone}" name="userPhone">
                    </c:if>
                    <c:if test="${empty requestScope.InfoUser.userPhone}">
                     手机号:<input type="text" placeholder="请完善手机号" name="userPhone">
                    </c:if>
                    <span id="phone"></span><br>


                    注册时间：<input type="text" disabled value="${requestScope.InfoUser.userRegtime}">
                    <span id="ver"></span><br>


                    <c:if test="${empty requestScope.InfoUser.userEmail}" >
                        邮箱:<input type="text" placeholder="请完善邮箱" name="userEmail">
                    </c:if>
                    <c:if test="${not empty requestScope.InfoUser.userEmail}">
                        邮箱：<input type="text"  value="${requestScope.InfoUser.userEmail}" name="userEmail">
                    </c:if>
                    <span id="email"></span><br>
                        <label class="hvr-sweep-to-right">
                        <input type="submit" value="修改">
                    </label>

                    <a href="/myhouse/web/pass?userName=${requestScope.InfoUser.userName}" style="margin-left: 400px">没有您想要的？修改密码</a>

                </form>
            </div>
        </div>
    </div>
</div>
<script>//表单验证
function check(){//用户名
    var usname = $("input[name=userName]").val()
    var reg = /^[\u4e00-\u999ffffA-Za-z0-9_]{2,10}$/;
    if (reg.test(usname)){
        $("#name").html("√")
        $("#name").css("color","green");
        $("input[type='submit']").attr("disabled", false);
    }else {
        $("#name").html("不合法")
        $("#name").css("color","red");
        $("input[type='submit']").attr("disabled", true);
    }
}
</script>
<script>//判断密码是否合法
function pass(){
    let pass =  $("input[name=userPass]").val();
    let regs = /^\w{6,8}$/
    if(regs.test(pass)){
        $("#pass").text("√");
        $("#pass").css("color","green");
        $("input[type='submit']").attr("disabled", false);;
    }
    else{
        $("#pass").text("请输入6-8位大小写英文字母和数字！");
        $("#pass").css("color","red");
        $("input[type='submit']").attr("disabled", true);
    }
}
</script>
<script>//判断手机号合不合法
function phoneby(){
    let phones = $("input[name=userPhone]").val()
    let red = /^\d{11}$/;
    if (red.test(phones)&&phones!=""){
        $("#phone").text("√");
        $("#phone").css("color","green");
        $("input[type='submit']").attr("disabled", false);
    }else {
        $("#phone").text("手机号不合法");
        $("#phone").css("color","red");
        $("input[type='submit']").attr("disabled", true);
    }
}
</script>
<script>//判断邮箱合不合法
function emails(){
    let ems = $("input[name=userEmail]").val();
    let res = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (res.test(ems)){
        $("#email").text("√")
        $("#email").css("color","green");
        $("input[type='submit']").attr("disabled", false);
    }else {
        $("#email").text("请输入合法邮箱")
        $("#email").css("color","red");
        $("input[type='submit']").attr("disabled", true);
    }
}
</script>
<script>
    $(function (){
        $("input[name='userName']").change(chages);
        $("input[name='userPass']").change(chages);
        $("input[name='userPhone']").change(chages);
        $("input[name='userEmail']").change(chages);

        $("#img").change(preview)

        $("input[name='userName']").blur(check);
        $("input[name='userPass']").blur(pass);
        $("input[name='userPhone']").blur(phoneby);
        $("input[name='userEmail']").blur(emails);

        $("input[type='submit']").attr("disabled", true);
    });
</script>


<script type="text/javascript">
    function chages(){
        $("input[type='submit']").attr("disabled", false);
    }
</script>
<!--//contact-->
<!--footer-->
<jsp:include page="/inc/footer.jsp"></jsp:include>
<!--//footer-->
<script>
    $(function () {
        $("#img").change(preview)
    })
    function preview(){
        let input = document.getElementById("img");
        let file = input.files;
        let fileReader = new FileReader();
        fileReader.onload = function (ne){
            $(".imgs").attr("src",ne.target.result)
        }
        fileReader.readAsDataURL(file[0]);
        $("input[type='submit']").attr("disabled", false);
    }
</script>
</body>
</html>
